<template>
  <view class="page">
    <view class="title-box">
      <view class="title">我的收藏</view>
      <view class="sub-title">定制无奇不有，畅享前所未游。</view>
    </view>
    
    <view class="list-wrapper">
      <tp-art-item-list
        v-if="plans && plans.length > 0"
        :plans="plans" 
        :more="false" 
        @loadMore="queryPlans" 
        @agree="handleAgree"
        @collect="handleCollect"
        more-text="更多"></tp-art-item-list>
      
      <tp-nodata-card v-else title="您暂时还没有收藏任何规划" :links="nodataLinks"></tp-nodata-card>
      
    </view>
    
    <tp-footer></tp-footer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        plans: [],
        more: true,
        page: 1,
        size: 5,
        nodataLinks: [{
          label: "去找找规划",
          url: "/pages/search/search"
        }]
      };
    },
    onLoad() {
      this.resetPage()
      this.queryPlans()
    },
    onReachBottom() {
      if (this.more) {
        this.queryPlans()
      }
    },
    methods: {
      resetPage() {
        this.more = true
        this.page = 1
        this.plans.splice(0, this.plans.length)
      },
      queryPlans() {
        let url = this.$urls.getApi("myCollects")
        let page = this.page
        let size = this.size;
        this.$get(url, {
          data: { page, size }
        }).then(res => {
          let plans = res.module || []
          this.more = plans.length >= size
          if (this.more) {
            this.page = page + 1;
          }
          if (plans) {
            this.plans.push(...plans)
          }
        })
      },
      handleAgree(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("agreePlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.agreeCnt = count
          plan.agreed = active
        })
      },
      handleCollect(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("collectPlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.collectCnt = count
          plan.collected = active
        })
      },
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .page {
    background-color: #f2f4f5;
    background-image: url(https://www.australia.cn/content/australia/zh_cn/places/perth-and-surrounds/best-beaches/jcr:content/mainParsys/imagewithcaption/LargeImageTile/largeImageSrc.adapt.740.medium.jpg);
    background-size: 100% 180px;
    background-repeat: no-repeat;
    min-height: calc(100vh - 48px);
  }
  
  .title-box {
    margin-top: 20px;
    color: $white;
    .title {
      font-size: 20px;
      font-weight: $font-weight-bold;
      .sub-title {
        font-size: 14px;
      }
    }
  }
  .list-wrapper {
    margin: 20px -12px 20px -12px;
  }

</style>
